<template>
    <div>
        <Row>
            <i-col span="12">
                <Card>
                    <div class="cropper-example cropper-first">
                        <cropper :src="exampleImageSrc" crop-button-text="确认提交" @on-crop="handleCroped"></cropper>
                    </div>
                </Card>
            </i-col>
        </Row>
    </div>
</template>

<script>
import Cropper from '@/components/cropper'
import {uploadImg} from '@/api/data'
export default {
    name: 'cropper_page',
    components: {
        Cropper
    },
    data() {
        return {
            exampleImageSrc: ''
        }
    },
    methods: {
        handleCroped(blob) {
            const formData = new FormData()
            formData.append('croppedImg', blob)
            uploadImg(formData).then(() => {
                this.$Message.success('Upload success~')
            })
        }
    }
}
</script>

<style lang="scss">
.cropper-example {
    height: 400px;
}
</style>
